<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>{if isset($title) || isset($CMS_PAGE_TITLE)}{$title|default:$CMS_PAGE_TITLE} - {/if}{$CMS_SITE.name}</title>
    <meta name="keywords" content="{$keyword|default:$CMS_PAGE_KEYWORD|default:$CMS_SITE.keyword}">
    <meta name="description" content="{$description|default:$CMS_PAGE_DESCRIPTION|default:$CMS_SITE.description}">
    <!-- 图标 -->
    <link rel="shortcut icon" href="{$CMS_SITE.logo}">
    <!-- 优先使用 IE 最新版本和 Chrome -->
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1"/>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <!-- 添加到主屏后的标题（iOS） -->
    <meta name="apple-mobile-web-app-title" content="">
    <!-- 是否启用 WebApp 全屏模式，删除苹果默认的工具栏和菜单栏 -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <!-- 设置苹果工具栏颜色 -->
    <meta name="apple-mobile-web-app-status-bar-style" content="green">
    <!-- 忽略页面中的数字识别为电话，忽略email识别 -->
    <meta name="format-detection" content="telphone=no, email=no">
    <!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 -->
    <meta name="HandheldFriendly" content="true">
    <!-- uc强制竖屏 -->
    <meta name="screen-orientation" content="portrait">
    <!-- QQ强制竖屏 -->
    <meta name="x5-orientation" content="portrait">
    <!-- UC强制全屏 -->
    <meta name="full-screen" content="yes">
    <!-- QQ强制全屏 -->
    <meta name="x5-fullscreen" content="true">
    <!-- UC应用模式 -->
    <meta name="browsermode" content="application">
    <!-- QQ应用模式 -->
    <meta name="x5-page-mode" content="app">
    <!-- 渲染内核 -->
    <meta name="renderer" content="webkit">
    <!-- 各种色 -->
    <link href="{static url='/other/css/material-color.min.css'}" rel="stylesheet">
    <!-- fa字体 -->
    <link href="{static url='/third-party/fa/css.css'}" rel="stylesheet">
    <!-- 因框架特性，为了能访问到模板包的静态资源，需要定义一些CSS变量 -->
    <style type="text/css">
        :root {
            /* 背景图片 */
            --var-background-image: url('{template url="/assets/images/background.jpeg"}');
        }
    </style>
    <!-- jQuery -->
    <script src="{static url='/third-party/jQuery/js.min.js'}"></script>
    <!-- vue -->
    <script src="{static url='/third-party/vue/3.2.47.prod.min.js'}"></script>
    <!-- axios -->
    <script src="{static url='/third-party/axios/1.3.4.min.js'}"></script>
    <!-- qrcode -->
    <script src="{static url='/third-party/qrcode/qrcode.js'}"></script>
    <!-- swiper -->
    <script src="{static url='/third-party/swiper/swiper-bundle.min.js'}"></script>
    <link href="{static url='/third-party/swiper/swiper-bundle.min.css'}" rel="stylesheet">
    <!-- 公共样式 -->
    <link rel="stylesheet" href="{assets url='/style/global.css'}{if $env.devMode}?{$smarty.now}{/if}">
    <!-- 主题样式 -->
    <link rel="stylesheet" href="{template url='/assets/style/style.css'}">
    <script>
        //滚动到某个元素
        function scrollToElem(id){
            const elem = $(id);
            let top = elem.get(0).offsetTop - $("header").height();
            $("html, body").animate({ scrollTop: top}, 300);
        }
        //滚动到顶部
        function scrollToTop(){
            $("html, body").animate({ scrollTop:0 }, 500);
        }
        //返回上一页
        function goBack() {
            if (window.history.length > 0) {
                window.history.back();
            }
        }
        //刷新页面
        function refresh() {
            let url = window.location.href;
            let query = url.indexOf("?") > 0 ? url.slice(url.indexOf("?") + 1) : "";
            url = url.indexOf("?") > 0 ? url.slice(0, url.indexOf("?")) : url;
            let time = (new Date()).getTime();
            let set = false;
            if (query.length > 0) {
                let params = query.split("&");
                let string = [];
                for (let i=0; i<params.length; i++) {
                    let arr = params[i].split("=");
                    if (arr[0] === "___t") {
                        if (!set) {
                            string.push("___t=" + time);
                            set = true;
                        }
                    } else {
                        string.push(params[i]);
                    }
                }
                query = string.join("&");
            }
            if (!set) {
                query += "___t=" + (new Date()).getTime();
            }
            window.location.href = url + (query.length > 0 ? ("?" + query) : "")
        }
        //显示浮动框
        function showModal(){
            const modalPageDiv = $("#modal-page");
            $("#search-panel").hide();
            $("#menu-panel").show();
            modalPageDiv.addClass("show");
            setTimeout(() => {
                modalPageDiv.addClass("open");
            }, 50);
        }
        //关闭
        function hideModal(){
            const modalPageDiv = $("#modal-page");
            modalPageDiv.addClass("close");
            setTimeout(() => {
                modalPageDiv.removeClass("show");
                modalPageDiv.removeClass("open");
                modalPageDiv.removeClass("close");
            }, 500);
        }
    </script>
</head>
<body>
<!-- 顶部读条 -->
<div class="reading-bar" style="position: fixed; top: 0; left: 0; z-index: 999; width: 100vw;"><div id="page-reading-percent" class="percent" style="width: 0;"></div></div>
<div class="header-prefix" style="height: 64px"></div>
<!-- 随处可用的搜索、页面菜单 -->
<div class="ui modal-page right" id="modal-page">
    <!-- 背景 -->
    <div class="modal-background" onclick="hideModal()"></div>
    <!-- 主体 -->
    <div class="modal-container padding">
        <div class="ui flex-item padding">
            <div class="center"></div>
            <div class="end">
                <div class="ui button circle outline" onclick="hideModal()"><i class="fa fa-xmark"></i></div>
            </div>
        </div>
        <!-- 菜单 -->
        <div class="panel-block">
            <div class="text-center">
                <h2 class="title">导航菜单</h2>
                {include "components/wavy.html"}
            </div>
            <div class="ui tree linear-split margin-top">
                <ul>
                    {categoryList parentId=0 all=1 item="menu"}
                    <li>
                        <a class="ui flex-item item padding" href="{$menu.url}" title="{$menu.name}">
                            <div class="start justify-center padding-right-half"><div class="ui button clear waiting tiny circle"><i class="fa {if !empty($menu.subList)}fa-angle-down{/if}"></i></div></div>
                            <div class="center justify-center text-bold">{$menu.name}</div>
                        </a>
                        {if !empty($menu.subList)}
                        <ul>
                            {foreach $menu.subList as $subM}
                            <li>
                                <a class="ui flex-item item padding" href="{$subM.url}" title="{$subM.name}">
                                    <div class="start justify-center padding-right-half"><div class="ui button clear waiting tiny circle"><i class="fa fa-"></i></div></div>
                                    <div class="center justify-center text-bold">{$subM.name}</div>
                                </a>
                            </li>
                            {/foreach}
                        </ul>
                        {/if}
                    </li>
                    {/categoryList}
                </ul>
            </div>
        </div>
    </div>
</div>
<!-- 页面二维码 -->
<div id="page-qrcode" {if $CMS_PAGE=="home"}class="home"{/if}>
    <div id="page-qrcode-image" class="qrcode"></div>
    <div class="text">手机扫一扫可浏览</div>
</div>
<!-- 顶部 -->
<header>
    <main class="ui flex-item">
        <div class="start site-logo justify-center">
            <a href="/" title="{$CMS_SITE.name}"><img src="{$CMS_SITE.logo}" height="40px" style="border-radius: 5px;"></a>
        </div>
        <div class="start site-name justify-center">{$CMS_SITE.name}</div>
        <div class="center menu-wrap justify-center">
            <menu>
                <dl class="item">
                    <dt><a href="{url url='/cms'}" {if $CMS_PAGE=='home'}class="active"{/if}>首页</a></dt>
                </dl>
                {categoryList parentId=0 total=4 all=1 item="cat"}
                <dl class="item">
                    {if $cat@index < 3}
                    <dt><a href="{$cat.url}" {if isset($category) && ($category.id==$cat.id || (!empty($category.parentsId) && in_array($cat.id, explode(',', $category.parentsId))))}class="active"{/if}>{$cat.name}</a></dt>
                    {if $cat.hasChild == 1 && !empty($cat.subList)}
                    <dd>
                        {foreach $cat.subList as $sub}
                        <a href="{$sub.url}" {if isset($category) && ($category.id==$sub.id || (!empty($category.parentsId) && in_array($sub.id, explode(',', $category.parentsId))))}class="active"{/if}>{$sub.name}</a>
                        {/foreach}
                    </dd>
                    {/if}
                    {else}
                    <dt>
                        <a href="javascript:void(0);" class="more"></a>
                    </dt>
                    <dd>
                        {categoryList parentId=0 offset=3 total=20 item="cat2"}
                        <a href="{$cat2.url}" {if isset($category) && ($category.id==$cat2.id || (!empty($category.parentsId) && in_array($cat2.id, explode(',', $category.parentsId))))}class="active"{/if}>{$cat2.name}</a>
                        {/categoryList}
                    </dd>
                    {/if}
                </dl>
                {/categoryList}
            </menu>
        </div>
        <div class="end search-wrap justify-center">
            <form class="search-form" method="get" action="{url url='/cms/web/search'}">
                <div class="input"><input name="keyword" value="{$CMS_PAGE_SEARCH_KEYWORD|default:''}" type="text" placeholder="文章标题搜索"></div>
                <div class="btn"><button type="submit"><i class="fa fa-search"></i></button></div>
            </form>
        </div>
        <div class="end ext-menu-toggle justify-center">
            <div class="ui button waiting" onclick="showModal()"><i class="fa-regular fa-list"></i></div>
        </div>
    </main>
</header>